<!-- RadioButton.svelte -->
<script lang="ts">
	import { getContext,onDestroy } from 'svelte';
	// 导入 RadioGroup 模块级导出的类型和上下文键
	import { RADIO_GROUP_CONTEXT_KEY, type RadioGroupContext,type RadioButtonRegistry } from './RadioGroup.svelte';	

	// 组件属性（外部可配置）
	export let value: any = null;
	export let label: string | number = '';
	export let disabled: boolean = false;
	export let name: string = '';
	export let fill: string | null = null;
	export let textColor: string | null = null;
	export let size: 'small' | 'medium' | 'large' | null = null;
	export let className: string = '';

	// 单独使用时的双向绑定（不依赖 RadioGroup）
	export let modelValue: any = null;
	export let onChange: (value: any) => void = () => {};

	// 获取父组件上下文（明确标注类型：RadioGroupContext | undefined）
	const group: RadioGroupContext | undefined = getContext(RADIO_GROUP_CONTEXT_KEY);
	let checked: boolean = false;
	// -------------------------- 计算属性（类型安全） --------------------------
	// 是否选中：优先使用 group 的 modelValue，无 group 则用自身 modelValue
	if (group) {
		const button: RadioButtonRegistry = {
			value,
			currentChecked: false, // 明确声明缓存属性
			updateChecked: (isChecked) => {
				checked = isChecked;
			}
		};

		const unregister = group.register(button);
		
		onDestroy(() => {
			if (unregister) unregister();
		});
	};
	$: if (!group) {
		checked = modelValue === value;
	};

	const defaultRandomName = `radio-${Math.random().toString(36).slice(2, 8)}`;
	let finalName: string ;
	let finalDisabled: boolean;
	let finalSize: 'small' | 'medium' | 'large';
	let finalFill: string;
	let finalTextColor: string;
	
	$: {
		// 最终禁用状态：自身禁用 || 父组禁用
		finalDisabled = disabled || (group ? group.disabled : false);
		// 最终尺寸：自身尺寸 || 父组尺寸 || 默认 medium
		finalSize = size || (group ? group.size : 'medium');
		// 最终填充色：自身颜色 || 父组颜色 || 主题色
		finalFill = fill || (group ? group.fill : 'var(--color-primary-600)');
		// 最终文本色：自身颜色 || 父组颜色 || 主题色
		finalTextColor = textColor || (group ? group.textColor : 'var(--color-primary-600)');
		// 最终名称：自身名称 || 父组名称 || 随机名称
		finalName = name || (group ? group.name : defaultRandomName);
	}

	// -------------------------- 交互逻辑 --------------------------
	function handleClick() {
		if (finalDisabled || checked) return; // 禁用/已选中则不处理
		if (group) {			
			group.onSelect(value); // 有父组：调用父组选中逻辑
		} else {			
			modelValue = value; // 无父组：更新自身 modelValue
			onChange(value); // 触发双向绑定回调
		}
	}

	// 键盘支持（Enter/Space 选中，符合无障碍）
	function handleKeydown(e: KeyboardEvent) {
		if ((e.key === 'Enter' || e.key === ' ') && !finalDisabled) {
			e.preventDefault();
			handleClick();
		}
	}
</script>

<!-- 组件渲染 -->
<div
	class={`radio-button radio-button--${finalSize} ${className} ${finalDisabled ? 'radio-button--disabled' : ''}`}
	style={`--radio-fill: ${finalFill}; --radio-text-color: ${finalTextColor};`}
	onclick={handleClick}
	onkeydown={handleKeydown}
	role="radio"
	aria-checked={checked}
	aria-disabled={finalDisabled}
	tabindex={finalDisabled ? -1 : 0}
>
	<input
		type="radio"
		class="radio-button__input"
		name={finalName}
		{checked}
		disabled={finalDisabled}
		{value}
	/>
	<span class="radio-button__label">
		<slot>{label}</slot>
		<!-- 支持插槽自定义内容（如图标+文字） -->
	</span>
</div>

<style scoped>
	.radio-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: pointer;
		user-select: none;
		transition: all 0.2s ease;
	}

	.radio-button__input {
		/* 隐藏原生单选框，用自定义样式替代 */
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		margin: 0;
		padding: 0;
	}

	.radio-button__label {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 4px 16px;
		font-size: 13px;
		line-height: 15px;
		height: 32px;		
		border-radius: var(--border-radius);
		transition: all 0.2s ease;
	}

	/* 尺寸适配 */
	.radio-button--small .radio-button__label {
		padding: 2px 12px;
		font-size: 12px;
		height: 24px;
	}
	.radio-button--large .radio-button__label {
		padding: 6px 20px;
		font-size: 16px;
		height: 40px;
	}

	/* 选中状态 */
	.radio-button__input:checked + .radio-button__label {
		border-color: var(--radio-fill);
		background-color: var(--radio-fill);		
	}

	/* 未选中hover状态 */
	.radio-button:not(.radio-button--disabled)
		.radio-button__label:hover {
		border-color: var(--radio-text-color);
		color: var(--radio-text-color);
	}

	/* 禁用状态 */
	.radio-button--disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}
	.radio-button--disabled .radio-button__label {
		background-color: #f5f7fa;
		border-color: #e4e7ed;
	}
</style>
